/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import { View, Text, StyleSheet, Image, useWindowDimensions } from 'react-native';
import { Track } from '../model';
import { useBreakpointValue, DisplayPriorityBox } from '@hadss/react_native_adaptive_layout/src';

interface CurPlaySongProps {
  song: Track;
}

const CurPlaySong: React.FC<CurPlaySongProps> = ({ song }) => {
  const windowWidth = useWindowDimensions().width;
  let curPlayWidth = useBreakpointValue({
    base: windowWidth - 20,
    sm: windowWidth - 20,
    md: windowWidth - 20,
    lg: windowWidth - 48,
    xl: windowWidth - 48,
  });
  let curPlayPadding = useBreakpointValue({
    base: 10,
    sm: 10,
    md: 10,
    lg: 24,
    xl: 24,
  });
  const curPlaySongInfo = useBreakpointValue({
    base: 155,
    sm: 155,
    md: 155,
    lg: 384,
    xl: 384,
  });

  const displayPriorityBoxWidth = useBreakpointValue({
    base: 70,
    sm: 70,
    md: 212,
    lg: 310,
    xl: 310,
  });
  const displayPriorityBoxLeft = useBreakpointValue({
    base: 0,
    sm: 0,
    md: 0,
    lg: -350,
    xl: -600,
  });
  const iconSpace = useBreakpointValue({
    base: 0,
    sm: 0,
    md: 0,
    lg: 20,
    xl: 20,
  });
  const isShowIcon = useBreakpointValue({
    base: false,
    sm: false,
    md: false,
    lg: true,
    xl: true,
  });
  const allIcons = (): JSX.Element => (
    <View>
      <DisplayPriorityBox style={{ width: displayPriorityBoxWidth, flexDirection: 'row', justifyContent: 'space-between', left: displayPriorityBoxLeft }}>
        {[
          {
            priority: 1,
            source: require('../../../../assets/playList/play_mode.png'),
            style: { width: 24, height: 24 },
          },
          {
            priority: 1,
            source: require('../../../../assets/playList/control_left.png'),
            style: { width: 28, height: 28, right: iconSpace },
          },
          {
            priority: 10,
            source: require('../../../../assets/playList/play_icon.png'),
            style: { width: 24, height: 24 },
          },
          {
            priority: 1,
            source: require('../../../../assets/playList/control_right.png'),
            style: { width: 28, height: 28, left: iconSpace },
          },
          {
            priority: 10,
            source: require('../../../../assets/playList/play_list_icon.png'),
            style: { width: 24, height: 24 },
          },
        ].map(({ priority, source, style }, index) => (
          <View key={index} displayPriority={priority} style={{ flexDirection: 'row', alignItems: 'center', flex: 1, width: 25 }}>
            <Image source={source} style={style} />
          </View>
        ))}
      </DisplayPriorityBox>
    </View>
  );
  return (
    <View
      style={[
        styles.curPlayContainer,
        {
          width: curPlayWidth,
          marginHorizontal: curPlayPadding,
        },
      ]}>
      <Image source={require('../../../../assets/playList/cover.png')} style={styles.albumCover} />
      <View style={[styles.songInfo, { width: curPlaySongInfo }]}>
        <Text style={styles.songTitle}>{song.title}</Text>
        <Text style={styles.songArtist}>{song.artist}</Text>
      </View>
      <View style={{ flex: 1 }} />
      <View style={{ marginRight: 4 }}>{allIcons()}</View>
      {isShowIcon && <Image source={require('../../../../assets/playList/love_icon.svg')} style={styles.loveStyle} />}
    </View>
  );
};

const styles = StyleSheet.create({
  curPlayContainer: {
    // flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 8,
    height: 48,
    backgroundColor: 'rgba(255, 255, 255, 1)',
    bottom: 25,
    shadowColor: 'rgba(0, 0, 0, 0.2)',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    position: 'absolute',
  },
  albumCover: {
    width: 32,
    height: 32,
    borderRadius: 4,
    marginLeft: 8,
  },
  songInfo: {
    flexDirection: 'column',
    justifyContent: 'center',
    left: 8,
  },
  songTitle: {
    fontSize: 14,
    fontWeight: '500',
    lineHeight: 19,
    color: 'rgba(0, 0, 0, 0.9)',
  },
  songArtist: {
    fontSize: 10,
    color: 'rgba(0, 0, 0, 0.4)',
    lineHeight: 13,
  },
  loveStyle: {
    width: 24,
    height: 24,
    marginRight: 8,
  },
});

export default CurPlaySong;
